<template>
    <div class="container-fluid mt-2">

        <div>
            <ButtonGroup :size="buttonSize">
                <Button :size="buttonSize" type="info">
                    <Icon type="md-cloud-upload" />
                    上传
                </Button>
                <Button :size="buttonSize" type="info">
                    <Icon type="ios-folder-open" />
                    添加文件夹
                </Button>
            </ButtonGroup>
            <Button class="ml-2 mr-2" :size="buttonSize" icon="ios-sync" type=""></Button>

            <ButtonGroup :size="buttonSize">
                <Button :size="buttonSize">
                    <Icon type="md-move" />
                    移动
                </Button>
                <Button :size="buttonSize">
                    <Icon type="ios-arrow-forward" />
                    重命名
                </Button>

                <Button :size="buttonSize">
                    <Icon type="md-trash" />
                    删除
                </Button>
                <Button :size="buttonSize">
                    <Icon type="ios-arrow-forward" />
                    Crop
                </Button>
            </ButtonGroup>
        </div>

        <Breadcrumb>
                <span v-for="floder in opened">
                    <BreadcrumbItem  @click="fetchFile(floder)">{{floder}}</BreadcrumbItem>
                </span>
        </Breadcrumb>
        <div class="row">
            <div class="col-10">
                <div class="d-flex flex-wrap">
                    <div v-for="file in directories" class="file_card d-inline-block card col-3  mt-2 mb-2 ml-2">
                        <div class="card-body" @click="fetchFiles(file)">
                            <div class="media">
                                <img class="align-self-center mr-1" style="height: 60px;" src="../../images/icon_directory.png">
                                <div class="media-body">
                                    <p class="file_name">{{file}}</p>
                                 </div>
                            </div>
                        </div>
                    </div>
                    <div v-for="file in files" class="file_card d-inline-block card col-3  mt-2 mb-2 ml-2">
                        <div class="card-body"  @click="fetchFile(file)">
                            <div class="media">
                                <img class="align-self-center mr-1" style="height: 60px;" src='../../images/icon_file.png'>

                                <div class="media-body">
                                    <p class="file_name">{{file}}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

            <div class="col-2">
                <div class="card">
                    hello world
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Media",
        mounted() {
            this.fetchFiles();
        },
        methods: {
            endWith(str) {
                let file= 'jpeg';
                if(str==null || str=="" || str.length == 0 ||str.length > file.length){
                    return false;
                }
                if(str.substring(str.length - file.length)){
                    return true;
                }else{
                    return false;
                }
                return true;
            } ,
            fetchFile(file) {

            },
            fetchFiles(directory) {
                let count = this.opened.length;
                let index = this.opened.indexOf(directory);
                if (index != -1) {
                    this.opened.splice(index,count-index)
                }
                if (directory) {

                    this.opened.push(directory);
                }
                http.get('/api/resource',{
                    params:{
                        directory:directory
                    }
                }).then((data)=>{
                    console.log(data);
                    this.files = data[0];
                    this.directories = data[1]
                });
            }
        },
        computed: {

        },
        data() {
            return {
                buttonSize: 'large',
                opened:[],
                files:[],
                directories:[]

            }
        }
    }
</script>

<style scoped>
    .file_name {
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
    }
    .file_card {
        overflow: hidden;
    }
</style>
